<template>
	<view class="u-page">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="计划详情" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="u-page">
			<view style="content:''; overflow: hidden;"></view>

			<plan-head :planInfo="planInfo" :planType="planType"></plan-head>


			<!-- 昨日未完成计划 -->
			<yesterday-plan title="昨日未完成计划" :userData="userData" @bindExplain="bindExplain"
				ref="yesterday"></yesterday-plan>


			<template v-if="addPlanItem.length">
				<view v-for="(item,index) in addPlanItem" :key="item.key" class="edit-box">
					<edit-item type="add" :userData="userData" :addRowList="planItemList" :planInfo="planInfo"
						:item="item" @delItem="delItem(index)" @publishSure="getDetail">
					</edit-item>
				</view>
			</template>
			<view class="coreshop-flex coreshop-justify-center coreshop-align-center card" @click="addItem">
				<view slot="body" class="coreshop-flex coreshop-justify-center add-btn">
					<u-icon name="plus" custom-prefix="custom-icon" color="#157EFB" :bold="true" size="15"
						:custom-style="{'margin-right':'14rpx'}"></u-icon>
					添加事项
				</view>
			</view>

			<!-- 完成情况说明 -->
			<explain-box v-if="showExplainPop" @cancelExplain="cancelExplain" @explainSure="explainSure"
				:userData="userData" :editExplainInfo="editExplainInfo"></explain-box>
		</view>
	</view>
</template>

<script>
	import planHead from '@/pages/member/agent/components/planDetail/head.vue'; //计划头部 
	import yesterdayPlan from './components/yesterdayPlan.vue'; //昨日未完成计划
	import explainBox from './components/explain.vue'; //完成情况说明
	import editItem from './components/editItem.vue';

	export default {
		data() {
			return {
				planType: "", //计划类型
				planInfo: {},
				userData: {},
				addPlanItem: [], //今日新增计划
				showExplainPop: false,
				editExplainInfo: {},
			}
		},
		components: {
			planHead,
			yesterdayPlan,
			editItem,
			explainBox
		},
		onLoad() {
			this.userData = this.$store.state.userInfo;
			if (this.userData.id == undefined) this.getUserInfo();
		},
		onShow() {
			this.getTodayWorkPlan();
		},
		methods: {
			getUserInfo() {
				var _this = this

				this.$u.api.userInfo().then(res => {
					if (res.status) {
						_this.userData = res.data
					}
				})
			},
			getTodayWorkPlan() {
				let self = this;
				this.$u.api.getTodayWorkPlan().then(res => {
					if (res.status) {
						if (res.data != null) {
							self.planInfo = res.data;
							self.typeList = self.$db.get('workPlanType');
							self.planType = self.$common.getLabelFromID(self.planInfo.jhlx, self.typeList);
						}
					}
				});
			},
			//完成情况
			bindExplain(d) {
				this.editExplainInfo = d;
				this.showExplainPop = true;
			},
			cancelExplain() {
				this.showExplainPop = false;
			},
			//完成情况保存
			explainSure(t) {
				const _this = this;
				switch (t) {
					case 'yesterday':
						_this.$refs.yesterday.getYesterDayList();
						_this.cancelExplain();
						break;
					case 'today':
						_this.getDetail();
						_this.cancelExplain();
						break;
				}
			},
			//新增项
			addItem() {
				this.addPlanItem.push({
					key: new Date().getTime()
				});
			},
			delItem(idx) {
				this.addPlanItem.splice(idx, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		height: 100%;

		&::v-deep {
			& {
				.u-field {
					padding: 0 !important;
				}

				.u-avatar {
					font-size: 32rpx;
					color: #fff;
				}
			}
		}
	}

	.plan-item-list {
		padding: 0 20rpx;
	}

	// 新增计划
	.add-btn {
		font-size: 26rpx;
		color: #157EFB;
		text-align: center;
		line-height: 40rpx;
	}

	.edit-box {
		margin: 20rpx;
	}

	.card {
		border: 1px solid #F7F7F7;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		height: 90rpx;
		margin: 20rpx;
		padding: 20rpx;
	}
</style>